<template>
  <div class="image-generator">
    <a-card class="generator-card" :bordered="false">
      <template #title>
        <div class="title">
          <span>✨ 随机头像生成器 ✨</span>
        </div>
      </template>

      <div class="controls">
        <a-form layout="vertical">
          <a-form-item label="设备类型 📱💻">
            <a-select v-model:value="params.method" placeholder="选择设备类型">
              <a-select-option value="pc">电脑端 💻</a-select-option>
              <a-select-option value="mobile">手机端 📱</a-select-option>
              <a-select-option value="zsy">自动判断 🔄</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="头像类型 👤">
            <a-radio-group v-model:value="params.lx" button-style="solid">
              <a-radio-button value="a1">男头 👨</a-radio-button>
              <a-radio-button value="b1">女头 👩</a-radio-button>
              <a-radio-button value="c1">动漫头像 🎭</a-radio-button>
              <a-radio-button value="c2">动漫女头 👸</a-radio-button>
              <a-radio-button value="c3">动漫男头 🧙‍♂️</a-radio-button>
            </a-radio-group>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" @click="generateImage" :loading="loading" block>
              生成新图片 🖼️
            </a-button>
          </a-form-item>
        </a-form>
      </div>

      <div class="image-container" v-if="imageData">
        <div class="image-wrapper">
          <img :src="imageData.imgurl" alt="生成的图片" class="generated-image" />
          <div class="image-info">
            <p>
              <span class="info-label">尺寸:</span>
              {{ imageData.width }}x{{ imageData.height }}
            </p>
          </div>
        </div>

        <div class="url-container">
          <p class="url-label">图片链接 🔗</p>
          <a-input-group compact>
            <a-input
              v-model:value="imageData.imgurl"
              readonly
              class="url-input"
            />
            <a-tooltip title="复制链接">
              <a-button @click="copyUrl">
                <template #icon><copy-outlined /></template>
              </a-button>
            </a-tooltip>
          </a-input-group>
        </div>
      </div>

      <div class="empty-state" v-else>
        <a-empty description="点击生成按钮获取图片" />
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue';
import axios from 'axios';
import { CopyOutlined } from '@ant-design/icons-vue';
import WallpaperGenerator from '@/pages/generator/WallpaperGenerator.vue'

// 定义参数和状态
const params = reactive({
  method: 'pc',
  lx: 'c1',
  format: 'json'
});

const imageData = ref(null);
const loading = ref(false);

// 生成图片方法
const generateImage = async () => {
  loading.value = true;
  try {
    const response = await axios.get('https://api.btstu.cn/sjtx/api.php', {
      params: params
    });

    imageData.value = response.data;
    message.success('图片生成成功 🎉');
  } catch (error) {
    console.error('获取图片失败:', error);
    message.error('获取图片失败，请重试 😢');
  } finally {
    loading.value = false;
  }
};

// 复制URL方法
const copyUrl = () => {
  if (imageData.value && imageData.value.imgurl) {
    navigator.clipboard.writeText(imageData.value.imgurl)
      .then(() => {
        message.success('链接已复制到剪贴板 📋');
      })
      .catch(() => {
        message.error('复制失败，请手动复制 ❌');
      });
  }
};

// 初始加载时生成一张图片
generateImage();
</script>

<style scoped>
.image-generator {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.generator-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.title {
  font-size: 1.5rem;
  text-align: center;
  color: #1890ff;
  font-weight: bold;
}

.controls {
  margin-bottom: 24px;
}

.image-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.generated-image {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.generated-image:hover {
  transform: scale(1.02);
}

.image-info {
  display: flex;
  justify-content: center;
  font-size: 14px;
  color: #666;
}

.info-label {
  font-weight: bold;
  margin-right: 4px;
}

.url-container {
  margin-top: 8px;
}

.url-label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.url-input {
  font-family: monospace;
  color: #1890ff;
}

.empty-state {
  padding: 40px 0;
}

@media (max-width: 576px) {
  .image-generator {
    padding: 10px;
  }

  .title {
    font-size: 1.2rem;
  }
}
</style>
